<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>售前工作量模型</title>
    <link rel="stylesheet" href="../css/all.min.css">
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #fff;
        }
        .main-container {
            display: flex;
            gap: 20px;
            margin: 0 auto;
        }
        .model-panel, .calc-panel {
            background-color: white;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            height: calc(100vh - 100px);
            overflow-y: auto;
        }
        .model-panel {
            flex: 1;
        }
        .calc-panel {
            flex: 1.5;
        }
        h2 {
            color: #3498db;
            border-bottom: 2px solid #3498db;
            padding-bottom: 8px;
            margin-top: 0;
        }
        h3 {
            color: #2980b9;
            margin: 20px 0 10px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 10px 0 20px;
            font-size: 14px;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #3498db;
            color: white;
            font-weight: bold;
        }
        tr:nth-child(even) {
            background-color: #f2f2f2;
        }
        .category-header {
            background-color: #2980b9 !important;
            color: white;
            font-weight: bold;
        }
        .subcategory {
            font-weight: bold;
            background-color: #e6f7ff;
        }
        .adjustment-factors {
            margin: 15px 0;
            padding: 10px;
            background-color: #f9f9f9;
            border-left: 4px solid #3498db;
            font-size: 13px;
        }
        .factor-item {
            margin-bottom: 5px;
        }
        .action-buttons {
            margin: 15px 0;
        }
        button {
            background-color: #3498db;
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 10px;
            font-size: 14px;
            transition: all 0.3s;
        }
        button:hover {
            background-color: #2980b9;
            transform: translateY(-2px);
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        }
        input, select {
            width: 100%;
            padding: 6px;
            box-sizing: border-box;
            border: 1px solid #ddd;
            border-radius: 3px;
            font-size: 14px;
        }
        .result {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            gap: 15px;
            margin: 25px 0;
            padding: 15px;
            background: linear-gradient(135deg, #f8f9fa, #e9ecef);
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
        .result-label {
            font-size: 18px;
            font-weight: bold;
            color: #495057;
        }
        .result-value {
            font-size: 18px;
            font-weight: bold;
            color: #495057;
            padding: 8px 20px;
            background-color: white;
            border-radius: 6px;
            box-shadow: inset 0 0 5px rgba(0,0,0,0.1);
            min-width: 120px;
            text-align: center;
        }
        #total-workload{
            color: #e74c3c;
        }
        .result-value span {
            font-size: 26px;
        }
        .small-input {
            width: 80px;
        }
        .scrollable-table {
            max-height: 400px;
            overflow-y: auto;
            display: block;
            scrollbar-width: thin;
            scrollbar-color: #3498db #f1f1f1;
        }
        .highlight {
            background-color: #fffacd;
        }

        /* 自定义滚动条 */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        
        ::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 10px;
        }
        
        ::-webkit-scrollbar-thumb {
            background: #3498db;
            border-radius: 10px;
            transition: all 0.3s;
        }
        
        ::-webkit-scrollbar-thumb:hover {
            background: #2980b9;
        }
    </style>
</head>
<body>
    <div class="main-container">
        <div class="model-panel">
            <h2><i class="fas fa-chart-line"></i> 售前工作量模型</h2>
            
            <h3><i class="fas fa-users"></i> 一、客户需求类</h3>
            <table>
                <tr class="category-header">
                    <th width="25%">工作内容</th>
                    <th width="25%">项目规模</th>
                    <th width="15%">基准工作量</th>
                    <th width="35%">说明</th>
                </tr>
                <tr>
                    <td rowspan="3">客户需求访谈</td>
                    <td>小型(1-2个部门)</td>
                    <td>1人天</td>
                    <td>基础需求收集</td>
                </tr>
                <tr>
                    <td>中型(3-5个部门)</td>
                    <td>2人天</td>
                    <td>含需求优先级排序</td>
                </tr>
                <tr>
                    <td>大型(全组织调研)</td>
                    <td>3人天</td>
                    <td>完整需求跟踪矩阵</td>
                </tr>
                <tr>
                    <td rowspan="3">业务现状分析</td>
                    <td>单业务流程</td>
                    <td>1.5人天</td>
                    <td>AS-IS流程梳理</td>
                </tr>
                <tr>
                    <td>跨部门流程</td>
                    <td>3人天</td>
                    <td>含痛点分析</td>
                </tr>
                <tr>
                    <td>企业级架构</td>
                    <td>5人天</td>
                    <td>包含业务架构图</td>
                </tr>
            </table>
            <div class="adjustment-factors">
                <div class="factor-item"><strong>调整系数：</strong></div>
                <div class="factor-item"><i class="fas fa-caret-right"></i> 客户配合度系数：1.0(主动配合) → 1.5(需反复沟通)</div>
                <div class="factor-item"><i class="fas fa-caret-right"></i> 业务复杂度系数：1.0(标准流程) → 2.0(特殊行业流程)</div>
            </div>

            <h3><i class="fas fa-chart-pie"></i> 二、市场分析类</h3>
            <table>
                <tr class="category-header">
                    <th width="25%">工作内容</th>
                    <th width="25%">项目规模</th>
                    <th width="15%">基准工作量</th>
                    <th width="35%">说明</th>
                </tr>
                <tr>
                    <td rowspan="3">行业分析报告</td>
                    <td>细分市场分析</td>
                    <td>3人天</td>
                    <td>PEST分析框架</td>
                </tr>
                <tr>
                    <td>行业全景分析</td>
                    <td>5人天</td>
                    <td>含价值链分析</td>
                </tr>
                <tr>
                    <td>战略级研判</td>
                    <td>8人天</td>
                    <td>含未来3-5年预测</td>
                </tr>
                <tr>
                    <td rowspan="3">竞品对标分析</td>
                    <td>功能对比</td>
                    <td>2人天</td>
                    <td>基础参数对比</td>
                </tr>
                <tr>
                    <td>解决方案对标</td>
                    <td>4人天</td>
                    <td>含优劣势矩阵</td>
                </tr>
                <tr>
                    <td>商业策略分析</td>
                    <td>6人天</td>
                    <td>含应对策略建议</td>
                </tr>
            </table>
            <div class="adjustment-factors">
                <div class="factor-item"><strong>调整系数：</strong></div>
                <div class="factor-item"><i class="fas fa-caret-right"></i> 数据获取难度：1.0(公开数据) → 2.0(需商业情报)</div>
                <div class="factor-item"><i class="fas fa-caret-right"></i> 分析颗粒度：1.0(宏观) → 1.8(微观操作层面)</div>
            </div>

            <h3><i class="fas fa-cogs"></i> 三、解决方案类</h3>
            <table>
                <tr class="category-header">
                    <th width="25%">工作内容</th>
                    <th width="25%">项目规模</th>
                    <th width="15%">基准工作量</th>
                    <th width="35%">说明</th>
                </tr>
                <tr>
                    <td rowspan="3">解决方案架构</td>
                    <td>单点解决方案</td>
                    <td>2人天</td>
                    <td>基础架构图</td>
                </tr>
                <tr>
                    <td>模块化方案</td>
                    <td>4人天</td>
                    <td>含接口设计</td>
                </tr>
                <tr>
                    <td>系统集成方案</td>
                    <td>7人天</td>
                    <td>含数据流设计</td>
                </tr>
                <tr>
                    <td rowspan="3">技术实施方案</td>
                    <td>标准化实施</td>
                    <td>3人天</td>
                    <td>标准部署方案</td>
                </tr>
                <tr>
                    <td>定制化开发</td>
                    <td>5人天</td>
                    <td>含开发工作量评估</td>
                </tr>
                <tr>
                    <td>复杂系统集成</td>
                    <td>8人天</td>
                    <td>含容灾方案</td>
                </tr>
            </table>
            <div class="adjustment-factors">
                <div class="factor-item"><strong>调整系数：</strong></div>
                <div class="factor-item"><i class="fas fa-caret-right"></i> 技术新颖性：1.0(成熟技术) → 2.0(前沿技术验证)</div>
                <div class="factor-item"><i class="fas fa-caret-right"></i> 定制化程度：1.0(标准产品) → 1.8(深度定制)</div>
            </div>

            <h3><i class="fas fa-handshake"></i> 四、商务方案类</h3>
            <table>
                <tr class="category-header">
                    <th width="25%">工作内容</th>
                    <th width="25%">项目规模</th>
                    <th width="15%">基准工作量</th>
                    <th width="35%">说明</th>
                </tr>
                <tr>
                    <td rowspan="3">商业论证报告</td>
                    <td>基础ROI分析</td>
                    <td>2人天</td>
                    <td>静态投资回报</td>
                </tr>
                <tr>
                    <td>完整商业案例</td>
                    <td>4人天</td>
                    <td>含敏感性分析</td>
                </tr>
                <tr>
                    <td>战略价值论证</td>
                    <td>6人天</td>
                    <td>含无形收益评估</td>
                </tr>
                <tr>
                    <td rowspan="3">合作模式设计</td>
                    <td>标准采购</td>
                    <td>1人天</td>
                    <td>常规商务条款</td>
                </tr>
                <tr>
                    <td>创新合作模式</td>
                    <td>3人天</td>
                    <td>如联合运营</td>
                </tr>
                <tr>
                    <td>生态共建方案</td>
                    <td>5人天</td>
                    <td>多方合作框架</td>
                </tr>
            </table>
            <div class="adjustment-factors">
                <div class="factor-item"><strong>调整系数：</strong></div>
                <div class="factor-item"><i class="fas fa-caret-right"></i> 商务复杂度：1.0(标准合同) → 1.8(特殊条款)</div>
                <div class="factor-item"><i class="fas fa-caret-right"></i> 法务参与度：1.0(模板合同) → 1.5(专项审核)</div>
            </div>

            <h3><i class="fas fa-desktop"></i> 五、演示验证类</h3>
            <table>
                <tr class="category-header">
                    <th width="25%">工作内容</th>
                    <th width="25%">项目规模</th>
                    <th width="15%">基准工作量</th>
                    <th width="35%">说明</th>
                </tr>
                <tr>
                    <td rowspan="3">方案演示材料</td>
                    <td>标准产品演示</td>
                    <td>2人天</td>
                    <td>基础功能演示</td>
                </tr>
                <tr>
                    <td>场景化演示</td>
                    <td>4人天</td>
                    <td>含客户数据</td>
                </tr>
                <tr>
                    <td>沉浸式体验</td>
                    <td>6人天</td>
                    <td>VR/AR演示</td>
                </tr>
                <tr>
                    <td rowspan="3">概念验证(POC)</td>
                    <td>基础验证</td>
                    <td>5人天</td>
                    <td>核心功能验证</td>
                </tr>
                <tr>
                    <td>场景化POC</td>
                    <td>8人天</td>
                    <td>真实业务场景</td>
                </tr>
                <tr>
                    <td>全流程验证</td>
                    <td>12人天</td>
                    <td>端到端验证</td>
                </tr>
            </table>
            <div class="adjustment-factors">
                <div class="factor-item"><strong>调整系数：</strong></div>
                <div class="factor-item"><i class="fas fa-caret-right"></i> 环境准备难度：1.0(标准环境) → 2.0(特殊配置)</div>
                <div class="factor-item"><i class="fas fa-caret-right"></i> 交互深度：1.0(单向演示) → 1.5(实时交互)</div>
            </div>

            <h3><i class="fas fa-file-signature"></i> 六、投标应标类</h3>
            <table>
                <tr class="category-header">
                    <th width="25%">工作内容</th>
                    <th width="25%">项目规模</th>
                    <th width="15%">基准工作量</th>
                    <th width="35%">说明</th>
                </tr>
                <tr>
                    <td rowspan="3">投标文件编制</td>
                    <td>简单标书</td>
                    <td>3人天</td>
                    <td>标准模板填充</td>
                </tr>
                <tr>
                    <td>复杂投标</td>
                    <td>7人天</td>
                    <td>定制化方案</td>
                </tr>
                <tr>
                    <td>战略级投标</td>
                    <td>12人天</td>
                    <td>全定制方案</td>
                </tr>
                <tr>
                    <td rowspan="3">述标准备</td>
                    <td>标准述标</td>
                    <td>2人天</td>
                    <td>PPT+Q&A准备</td>
                </tr>
                <tr>
                    <td>场景化演练</td>
                    <td>4人天</td>
                    <td>含角色扮演</td>
                </tr>
                <tr>
                    <td>全真模拟</td>
                    <td>6人天</td>
                    <td>含压力测试</td>
                </tr>
            </table>
            <div class="adjustment-factors">
                <div class="factor-item"><strong>调整系数：</strong></div>
                <div class="factor-item"><i class="fas fa-caret-right"></i> 标书复杂度：1.0(简单要求) → 2.0(特殊要求)</div>
                <div class="factor-item"><i class="fas fa-caret-right"></i> 时间压力：1.0(正常周期) → 1.8(紧急标书)</div>
            </div>
        </div>

        <div class="calc-panel">
            <h2><i class="fas fa-calculator"></i> 售前工作量计算</h2>
            
            <div class="action-buttons">
                <button onclick="addRow()"><i class="fas fa-plus"></i> 添加输出物</button>
                <button onclick="calculate()"><i class="fas fa-calculator"></i> 计算工作量</button>
                <button onclick="clearTable()"><i class="fas fa-trash"></i> 清空表格</button>
            </div>
            
            <div class="scrollable-table">
                <table id="workload-table">
                    <thead>
                        <tr>
                            <th width="15%">类别</th>
                            <th width="15%">工作内容</th>
                            <th width="15%">项目规模</th>
                            <th width="10%">基准</th>
                            <th width="15%">调整系数</th>
                            <th width="10%">系数值</th>
                            <th width="10%">工作量</th>
                            <th width="10%">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
            
            <div class="result">
                <div class="result-label">合计工作量:</div>
                <div class="result-value"><span id="total-workload">0</span> 人天</div>
            </div>
            
            <h3><i class="fas fa-info-circle"></i> 计算说明</h3>
            <div class="adjustment-factors">
                <div class="factor-item"><i class="fas fa-check"></i> 选择左侧对应的类别和工作内容</div>
                <div class="factor-item"><i class="fas fa-check"></i> 根据项目规模确定基准工作量</div>
                <div class="factor-item"><i class="fas fa-check"></i> 选择适当的调整系数</div>
                <div class="factor-item"><i class="fas fa-check"></i> 系统自动计算：工作量 = 基准 × 系数</div>
                <div class="factor-item"><i class="fas fa-check"></i> 可添加多个工作项进行汇总计算</div>
            </div>
        </div>
    </div>

    <script>
        const workloadStandards = {
            "客户需求类": {
                "客户需求访谈": {
                    "小型(1-2个部门)": 1,
                    "中型(3-5个部门)": 2,
                    "大型(全组织调研)": 3
                },
                "业务现状分析": {
                    "单业务流程": 1.5,
                    "跨部门流程": 3,
                    "企业级架构": 5
                }
            },
            "市场分析类": {
                "行业分析报告": {
                    "细分市场分析": 3,
                    "行业全景分析": 5,
                    "战略级研判": 8
                },
                "竞品对标分析": {
                    "功能对比": 2,
                    "解决方案对标": 4,
                    "商业策略分析": 6
                }
            },
            "解决方案类": {
                "解决方案架构": {
                    "单点解决方案": 2,
                    "模块化方案": 4,
                    "系统集成方案": 7
                },
                "技术实施方案": {
                    "标准化实施": 3,
                    "定制化开发": 5,
                    "复杂系统集成": 8
                }
            },
            "商务方案类": {
                "商业论证报告": {
                    "基础ROI分析": 2,
                    "完整商业案例": 4,
                    "战略价值论证": 6
                },
                "合作模式设计": {
                    "标准采购": 1,
                    "创新合作模式": 3,
                    "生态共建方案": 5
                }
            },
            "演示验证类": {
                "方案演示材料": {
                    "标准产品演示": 2,
                    "场景化演示": 4,
                    "沉浸式体验": 6
                },
                "概念验证(POC)": {
                    "基础验证": 5,
                    "场景化POC": 8,
                    "全流程验证": 12
                }
            },
            "投标应标类": {
                "投标文件编制": {
                    "简单标书": 3,
                    "复杂投标": 7,
                    "战略级投标": 12
                },
                "述标准备": {
                    "标准述标": 2,
                    "场景化演练": 4,
                    "全真模拟": 6
                }
            }
        };

        const adjustmentFactors = {
            "客户需求类": {
                "客户配合度系数": [1.0, 1.2, 1.5],
                "业务复杂度系数": [1.0, 1.5, 2.0]
            },
            "市场分析类": {
                "数据获取难度系数": [1.0, 1.3, 1.5, 2.0],
                "分析颗粒度系数": [1.0, 1.3, 1.5, 1.8]
            },
            "解决方案类": {
                "技术新颖性系数": [1.0, 1.5, 2.0],
                "定制化程度系数": [1.0, 1.3, 1.5, 1.8]
            },
            "商务方案类": {
                "商务复杂度系数": [1.0, 1.2, 1.5, 1.8],
                "法务参与度系数": [1.0, 1.2, 1.5]
            },
            "演示验证类": {
                "环境准备难度系数": [1.0, 1.5, 2.0],
                "交互深度系数": [1.0, 1.2, 1.5]
            },
            "投标应标类": {
                "标书复杂度系数": [1.0, 1.5, 2.0],
                "时间压力系数": [1.0, 1.3, 1.5, 1.8]
            }
        };

        function addRow() {
            const tbody = document.querySelector('#workload-table tbody');
            const row = document.createElement('tr');
            row.innerHTML = `
                <td>
                    <select class="category" onchange="updateTypes(this)">
                        <option value="">选择类别</option>
                        ${Object.keys(workloadStandards).map(cat => `<option value="${cat}">${cat}</option>`).join('')}
                    </select>
                </td>
                <td>
                    <select class="type" disabled onchange="updateSizes(this)">
                        <option value="">选择内容</option>
                    </select>
                </td>
                <td>
                    <select class="size" disabled onchange="updateBaseWorkload(this)">
                        <option value="">选择规模</option>
                    </select>
                </td>
                <td>
                    <input type="number" class="base-workload" readonly>
                </td>
                <td>
                    <select class="factor-type" disabled onchange="updateFactorValues(this)">
                        <option value="">选择系数</option>
                    </select>
                </td>
                <td>
                    <select class="factor-value" disabled onchange="calculateRow(this.closest('tr'))">
                        <option value="1">1.0</option>
                    </select>
                </td>
                <td>
                    <input type="number" class="final-workload" readonly>
                </td>
                <td>
                    <button onclick="removeRow(this)" style="padding: 3px 5px;"><i class="fas fa-trash"></i></button>
                </td>
            `;
            tbody.appendChild(row);
        }

        function removeRow(button) {
            const row = button.closest('tr');
            row.remove();
            calculate();
        }

        function clearTable() {
            const tbody = document.querySelector('#workload-table tbody');
            tbody.innerHTML = '';
            document.getElementById('total-workload').textContent = '0';
        }

        function updateTypes(select) {
            const row = select.closest('tr');
            const category = select.value;
            const typeSelect = row.querySelector('.type');
            
            typeSelect.innerHTML = '<option value="">选择内容</option>';
            row.querySelector('.size').innerHTML = '<option value="">选择规模</option>';
            row.querySelector('.size').disabled = true;
            row.querySelector('.base-workload').value = '';
            row.querySelector('.factor-type').innerHTML = '<option value="">选择系数</option>';
            row.querySelector('.factor-value').innerHTML = '<option value="1">1.0</option>';
            row.querySelector('.factor-value').disabled = true;
            row.querySelector('.final-workload').value = '';
            
            if (category) {
                const types = Object.keys(workloadStandards[category]);
                types.forEach(type => {
                    typeSelect.innerHTML += `<option value="${type}">${type}</option>`;
                });
                typeSelect.disabled = false;
                
                const factorTypeSelect = row.querySelector('.factor-type');
                factorTypeSelect.innerHTML = '<option value="">选择系数</option>';
                const factors = Object.keys(adjustmentFactors[category]);
                factors.forEach(factor => {
                    factorTypeSelect.innerHTML += `<option value="${factor}">${factor}</option>`;
                });
                factorTypeSelect.disabled = false;
            } else {
                typeSelect.disabled = true;
                row.querySelector('.factor-type').disabled = true;
            }
        }

        function updateSizes(select) {
            const row = select.closest('tr');
            const category = row.querySelector('.category').value;
            const type = select.value;
            const sizeSelect = row.querySelector('.size');
            
            sizeSelect.innerHTML = '<option value="">选择规模</option>';
            row.querySelector('.base-workload').value = '';
            
            if (category && type) {
                const sizes = Object.keys(workloadStandards[category][type]);
                sizes.forEach(size => {
                    sizeSelect.innerHTML += `<option value="${size}">${size}</option>`;
                });
                sizeSelect.disabled = false;
            } else {
                sizeSelect.disabled = true;
            }
        }

        function updateBaseWorkload(select) {
            const row = select.closest('tr');
            const category = row.querySelector('.category').value;
            const type = row.querySelector('.type').value;
            const size = select.value;
            const baseWorkloadInput = row.querySelector('.base-workload');
            
            if (category && type && size) {
                const workload = workloadStandards[category][type][size];
                baseWorkloadInput.value = workload;
                calculateRow(row);
            } else {
                baseWorkloadInput.value = '';
            }
        }

        function updateFactorValues(select) {
            const row = select.closest('tr');
            const category = row.querySelector('.category').value;
            const factorType = select.value;
            const factorValueSelect = row.querySelector('.factor-value');
            
            if (category && factorType) {
                factorValueSelect.innerHTML = '';
                const factors = adjustmentFactors[category][factorType];
                factors.forEach(factor => {
                    factorValueSelect.innerHTML += `<option value="${factor}">${factor.toFixed(1)}</option>`;
                });
                factorValueSelect.disabled = false;
                calculateRow(row);
            } else {
                factorValueSelect.innerHTML = '<option value="1">1.0</option>';
                factorValueSelect.disabled = true;
            }
        }

        function calculateRow(row) {
            const baseWorkload = parseFloat(row.querySelector('.base-workload').value) || 0;
            const factorValue = parseFloat(row.querySelector('.factor-value').value) || 1;
            const finalWorkloadInput = row.querySelector('.final-workload');
            
            const finalWorkload = baseWorkload * factorValue;
            finalWorkloadInput.value = finalWorkload.toFixed(1);
            calculate();
        }

        function calculate() {
            const rows = document.querySelectorAll('#workload-table tbody tr');
            let totalWorkload = 0;
            
            rows.forEach(row => {
                const finalWorkload = parseFloat(row.querySelector('.final-workload').value) || 0;
                totalWorkload += finalWorkload;
            });
            
            document.getElementById('total-workload').textContent = totalWorkload.toFixed(1);
        }

        window.onload = function() {
            addRow();
        };
    </script>
</body>
</html>